<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-09-21 16:34:18
 * @LastEditors: 976901273@qq.com
 * @LastEditTime: 2023-11-22 10:09:07
 * @Description:
 *
-->

<template>
  <MyContainer class="container">
    <MyHeader class="header">
      <el-input
        v-model="searchKey"
        style="width: 200px; margin-right: 20px"
        size="medium"
        class="input"
        placeholder="请输入关键字进行过滤"
        clearable
        @clear="clearClick"
        @keyup.enter.native="initData"
      />
      <el-button
        size="medium"
        type="primary"
        @click="initData"
      >查询</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button>
    </MyHeader>
    <MyMain class="main">
      <el-table
        class="common-table"
        :data="dataList"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }"
      >
        <el-table-column
          prop="hostName"
          label="主机名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cloudProvider"
          label="云服务商"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cloudAccountName"
          label="云账号名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="type"
          label="类型"
          show-overflow-tooltip
        />
        <el-table-column
          prop="ip"
          label="IP"
          show-overflow-tooltip
        />
        <el-table-column
          prop="vcpuUsed"
          label="vCPU（已用）"
          show-overflow-tooltip
        />
        <el-table-column
          prop="vcpu"
          label="vCPU（总计）"
          show-overflow-tooltip
        />
        <el-table-column
          prop="memUsed"
          label="内存（已用）"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mem"
          label="内存（总计）"
          show-overflow-tooltip
        />
        <el-table-column
          prop="diskUsed"
          label="本地存储（已用）"
          show-overflow-tooltip
        />
        <el-table-column
          prop="disk"
          label="本地存储（总计）"
          show-overflow-tooltip
        />
        <el-table-column
          prop="status"
          label="使能状态"
          show-overflow-tooltip
        />
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 30px">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="totalCount"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </MyMain>
  </MyContainer>
</template>

<script>
import pagePermissionMixin from '@/views/mixin/pagePermission.js'
import pageQueryMixin from '@/views/mixin/pageQuery.js'
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyHeader from '@/components/Layout/MyHeader.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import { getPmList } from '@/api/cn-mgmt'

export default {
  name: 'SystemMonitorCNResPM',
  components: {
    MyContainer,
    MyHeader,
    MyMain
  },
  mixins: [pagePermissionMixin, pageQueryMixin],
  data() {
    return {
      pageNum:0,
      pageSize:10,
      totalCount:0,
      searchKey:'',
      dataList:[],
    }
  },
  created() {},
  mounted(){
    this.initData()
  },
  methods: {
    /**
     * @description: 获取算网列表
     * @return {*}
     */
    initData() {
      let params = {
        keyword: this.searchKey,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getPmList(params).then(res => {
        this.dataList = res.data.data// 返回数据在res.data.data中
        this.totalCount = res.data.totalCount
      })
    },
    changePage(val){
      this.pageNum = val
      this.initData()
    },
    sizeChange(val){
      this.pageSize = val
      this.initData()
    },
    resetClick(){
      this.searchKey = ''
      this.initData()
    },
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.container {
}
</style>
